<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="./logo.png">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>应聘:前端工程师_田文滨（简历）</title>
</head>

<body>
  <div class="main" id="main">
    <h2><span>基本信息</span></h2>
    <div class="row-box">
      <div class="row-flex">
        <div class="second-row-item"><strong>姓名：</strong>田文滨 | <strong>性别：</strong>男 | <strong>出生年份：</strong>1992</div>
        <div class="second-row-item left_border"><strong>应聘岗位：</strong>前端工程师 | <strong>工作经验：</strong><strong
            id="yearId"></strong>年 (2016.02-2025.10)</div>
      </div>
      <div class="row-flex">
        <div class="second-row-item"><strong>学历：</strong>华侨大学 | 软件工程 | 本科(2012.09-2016.06)</div>
        <div class="second-row-item left_border"><strong>联系方式：</strong>19906058361 | 972619117@qq.com</div>
      </div>
    </div>
    <h2><span>核心技能</span></h2>
    <div class="row-box">
      <div class="row-box-col none_border"><strong>前端基础：</strong> 精通 JavaScript/ES6、CSS/CSS3、HTML5。熟悉 W3C 规范与前端工程化流程。
      </div>
      <div class="row-box-col"><strong>主流框架：</strong></div>
      <div class="row-box-col"> • 深入掌握 Vue.js 2/3 生态（响应式原理、组件设计、Vuex/pinia 状态管理）</div>
      <div class="row-box-col"> • 熟练使用 Uni-app 开发多端小程序（微信、小红书等）,熟悉原生小程序语法及生命周期。</div>
      <div class="row-box-col"><strong>工程化与工具：</strong> 熟悉 Webpack、Vite 等前端构建工具、掌握 Git 协作流程与 CI/CD 基础。</div>
      <div class="row-box-col"><strong>组件与业务：</strong></div>
      <div class="row-box-col"> • 有丰富的业务组件封装经验、复杂的业务开发能力。</div>
      <div class="row-box-col"> • 熟悉低代码平台设计（如宝马 DLP 的 H5 编辑器）、AI 工具链集成（Dify）</div>
    </div>
    <h2><span>工作经历</span></h2>
    <div class="row-box">
      <div class="row-box-col">
        <div class="row-col-tt">🏢 稿定科技有限公司（2021.05-2025.10）|中高级前端工程师</div>
        <h5 class="circle2">项目一：宝马 DLP 动态落地页管理系统（技术负责人 | 带 3 前端 + 2 后端团队）</h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p simple">为宝马中国提供低代码 H5 编辑器，支持快速拖拽形成车企活动推广页面（覆盖
            Web/移动/APP/小程序多端），推广给 100+ 经销商做品牌管控的活动统一推广，来达到统一营销内容与线索收集。</span></p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p">主导技术方案设计，负责核心功能开发、SDK
            封装及多端技术对接，协调团队完成全链路交付</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue2、@vue/composition-api、Webpack、Vite、Antd。</span>
        </p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 架构设计：通过 SDK 封装核心功能（如预览、发布、下载功能），将项目开发成本降低 30%</span></p>
        <p class="margin_bt"><span class="t_p"> • 多端适配：组件支持 Web/移动/小程序等渠道投放，确保不同分辨率与交互逻辑下的一致性</span></p>
        <p class="margin_bt"><span class="t_p"> • 效率提升：平均每个活动制作时长从 3 天缩短至 3 小时，每年为客户节省超 1000+ 万成本</span></p>
        <p class="margin_bt"><span class="t_p"> • 扩展能力：开放自定义组件接口，已服务 5+ 客户并创造 50w+ 收益</span></p>
        <p class="margin_bt"><strong>关键成果：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 封装车企表单组件被 4 款业务组件复用，研发效率提升 50%+，毛利率提高 50%+</span></p>
        <p class="margin_bt"><span class="t_p"> • 成为宝马固定营销解决方案，支撑年均数百场品牌活动推广</span></p>
        <h5 class="circle2">项目二：小程序稿定模版渲染引擎（技术负责人）</h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p">通过 H5 编辑器保存的稿定模板 JSON，实现小程序端动态渲染对应页面（还原 H5
            设计稿）</span></p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p">独立负责前端开发与迭代，攻克 H5-小程序跨端渲染技术难点</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue3、Uni-app、Git、原始小程序语法</span></p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 使用 Uni-app + 原生小程序语法，支持视频/轮播图/TAB 图文联动等 20+ 组件，100% 还原 H5
            设计</span></p>
        <p class="margin_bt"><span class="t_p"> • 实现多设备屏幕适配，确保不同尺寸小程序正常显示</span></p>
        <p class="margin_bt"><strong>​关键成果​：</strong><span class="t_p">组件覆盖 H5 全部功能，项目毛利率 70%+，支撑客户快速生成小程序营销页面</span>
        </p>
        <h5 class="circle2">项目三：制定化项目插件工具</h5>
        <p class="margin_bt">
          <strong>项目背景：</strong>
          <span class="t_p simple">基于稿定标准产品，通过插件化方案减少源码修改，满足客户个性化需求（如自定义组件、动态文本替换器、全局事件捕获等）</span>
        </p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p bold">主导插件工具开发，提升定制化效率并降低维护成本</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue2/3、Vite、SystemJS、Git</span></p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 预埋自定义组件功能，支持任意位置插入个性化模块，开发效率提升 50%+</span></p>
        <p class="margin_bt"><span class="t_p"> • 全局事件捕获功能（用于埋点统计），被 3+ 客户应用（平均处理 10+ 事件/客户）</span></p>
        <p class="margin_bt"><span class="t_p"> • 文本替换器支持批量文本修改（已服务 5+ 客户，平均替换 10+ 处/客户）</span></p>
        <p class="margin_bt"><strong>关键成果：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 减少 80% 源码改动，综合研发效率提升 50%+，直接创造商业价值</span></p>
        <h5 class="circle2">项目四：小红书 AI 智能助手</h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p">结合 AI 技术与稿定小红书模版库，快速生成符合用户需求的小红书内容，提升创作效率</span>
        </p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p simple">把控进度，负责前端项目开发与迭代。</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue2、Vite、Git、Dify</span></p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 接入 Dify 平台，结合 AI 技术创建相应的工作流，实现智能内容生成</span></p>
        <p class="margin_bt"><strong>关键成果：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 作为核心模块功能，成为稿定产品商业化的一部分</span></p>
        <h5 class="circle2">项目四：稿定 AI 登陆激励体系</h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p">为了提高稿定 AI 用户的注册率，特设计登陆激励体系，奖励用户注册并使用 AI 功能</span>
        </p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p simple">负责前端功能的实现</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Cursor、Vue2、Vite、Git、SSR</span></p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 通过 Cursor 工具，采用 Vibe Coding 的方式，快速实现了这个需求</span></p>
        <p class="margin_bt"><strong>关键成果：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 体验 Vibe Coding 编程方式，该需求研发效率提升了 50%+</span></p>
        <div class="row-col-tt">🏥智业软件股份有限公司（2016.09-2021.05） | 前端工程师</div>
        <h5 class="circle2">项目一：ZOE PC 端组件库（独立开发与迭代 <strong></strong></h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p">ZOE，是一套帮你快速开发产品的基于Vue.js的PC端组件库。</span></p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p bold">独自负责组件库设计、开发与文档编写，推动全团队使用</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue2、Webpack、VuePress、Vue-i18n、Git。</span></p>
        <p class="margin_bt"><strong>技术亮点​：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 封装输入框（校验功能）、日期组件（智能输入）、下拉/表格组件（虚拟视窗优化），提升开发效率与用户体验</span></p>
        <p class="margin_bt"><span class="t_p"> • 注册快捷键指令功能，支持全快捷键录入操作，信息录入效率提高 30%+</span></p>
        <p class="margin_bt"><span class="t_p"> • 通过虚拟视窗优化表格渲染，性能提升 60%，保障项目顺利上线</span></p>
        <h5 class="circle2">项目二：桌面门户系统（PC 端权限管理平台</h5>
        <p class="margin_bt">
          <strong>项目背景：</strong>
          <span class="t_p">医院/企业用户的业务系统入口（如门诊、病历、收费等），支持菜单权限与快捷操作。</span>
        </p>
        <p class="margin_bt"><strong>职责：</strong><span class="t_p bold">负责前端开发，实现多端登录与消息管理</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue2、Webpack、ZOE组件库、Vue-i18n、WebSocket、Git。</span>
        </p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p circle">支持账号密码/扫码/CA 多种登录方式，提升用户接入便捷性</span></p>
        <p class="margin_bt"><span class="t_p">自研<a target="_blank" class="col-link"
              href="http://wenbintian.gitee.io/t-desk-drag/#/"><span
                style="font-weight: bold; text-decoration: underline;">拖拽组件</span></a>，支持菜单缩放/固定，提供灵活的桌面布局配置
            。</span></p>
        <p class="margin_bt"><span class="t_p">通过移除冗余字段、分批通知、虚拟视窗，解决消息任务卡顿问题，<strong>保证项目运行顺畅。</strong> </span></p>
        <h5 class="circle2">项目三：HIS5.0 医院信息系统</h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p">覆盖医院全业务流程的信息管理系统，医嘱模块是核心功能之一</span></p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p">负责医嘱模块及业务组件开发，解决跨域与版本兼容问题</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue、Webpack、ZOE组件库、Vue-i18n、Git。</span></p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 封装药品/病人选择、诊断录入、读卡业务等组件，提升开发效率与代码健壮性</span></p>
        <p class="margin_bt"><span class="t_p"> • 通过 PostMessage 解决跨域数据传输，保证多系统数据互通</span></p>
        <h5 class="circle2">项目四：集成视图（数据可视化平台）</h5>
        <p class="margin_bt"><strong>项目背景：</strong><span class="t_p">展示患者就诊信息的数据平台（报告汇总/活动追踪/闭环管理）</span></p>
        <p class="margin_bt"><strong>核心职责：</strong><span class="t_p">负责前端开发，实现图表与时间轴可视化</span></p>
        <p class="margin_bt"><strong>主要技术：</strong><span class="t_p">Vue、Webpack、Echarts、Element-ui、Git。</span></p>
        <p class="margin_bt"><strong>技术亮点：</strong></p>
        <p class="margin_bt"><span class="t_p"> • 采用 Echarts 展示报告数据，医生解读效率提高 40%</span></p>
        <p class="margin_bt"><span class="t_p"> • 封装时间轴组件直观呈现就诊历程，步骤组件清晰展示检验/用药完成情况</span></p>
        <div style="display: none;">
          <h5 class="circle2">项目五：智业烽火平台（微信小程序/PC端）</h5>
          <p class="margin_bt"><strong>职责：</strong><span class="t_p">负责微信小程序/PC端的前端开发与迭代。</span></p>
          <p class="margin_bt"><strong>技术：</strong><span class="t_p">Vue、Webpack、Element-ui、WeUI、Git。</span></p>
          <p class="margin_bt"><strong>简介：</strong><span class="t_p">基于原生微信小程序框架/vue-cli开发的有关项目疑问汇总与解答的管理平台。</span></p>
          <p class="margin_bt"><strong>要点：</strong></p>
          <p class="margin_bt"><span class="t_p">1.权限管理：管理用户菜单以及功能相关的权限。</span></p>
          <p class="margin_bt"><span class="t_p">2.疑问汇总：通过将问题以分类和图片的形式提交，来达到问题通俗易懂的效果。</span></p>
          <p class="margin_bt"><span class="t_p">3.疑问解答：通过图片+文字描述，对问题进行解答。</span></p>
        </div>
      </div>
      <div class="row-box-col" style="display: none;">
        <div class="row-col-tt circle">福州新大陆支付（2015年6月--2015年12月）</div>
        <h5 class="circle2">项目一：拉卡拉POS机支付平台</h5>
        <p class="margin_bt"><strong>职责：</strong><span class="t_p">开发证件号输入功能模块。</span></p>
        <p class="margin_bt"><strong>技术：</strong></p>
        <p class="margin_bt"><span class="t_p">html、JavaScript、jQuery、正则表达式。</span></p>
        <p class="margin_bt"><strong>要点：</strong></p>
        <p class="margin_bt"><span class="t_p">开发证件号输入功能模块。</span></p>
      </div>
    </div>
    <h2><span>自我评价</span></h2>
    <div class="row-box">
      <div class="row-box-col"> • <span id="yearId2"></span> 年前端开发经验，深耕 Vue 生态与工程化实践</div>
      <div class="row-box-col"> • 有丰富的大型项目经验（宝马 DLP、医院 HIS 系统），能平衡技术实现与业务需求，通过技术创新降本增效</div>
      <div class="row-box-col"> • 持续学习前沿技术（关注 Vue3 Composition API、vite、前端性能优化、AI），具备良好的代码规范与问题解决能力</div>
      <div class="row-box-col"> • 适应跨团队协作，擅长需求分析、技术方案设计与小团队带教</div>
    </div>
  </div>
  <script>
    var dif = parseInt((new Date().getTime() - new Date("2016/02/22").getTime()) / (365 * 24 * 60 * 60 * 1000) * 10) / 10;
    if (('' + dif).indexOf(".") == -1) {
      document.getElementById("yearId").innerText = dif;
    } else {
      var dif2 = ('' + dif).substring(('' + dif).indexOf("."));
      dif2 = parseFloat(dif2);
      dif = ('' + dif).substring(0, ('' + dif).indexOf("."));
      if (dif2 >= 0.5) {
        // dif = dif+".5";
      }
      document.getElementById("yearId").innerText = dif;
      document.getElementById("yearId2").innerText = dif;
    }

  </script>
</body>
<style>
  html,
  body {
    background: #fcfcfc;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
  }

  .main {
    max-width: 864px;
    box-shadow: 1px 1px 8px rgba(0, 0, 0, .15);
    padding: 10px 15px;
    margin: 0 auto;
    background: #fff;
  }

  h2 {
    margin: 0 0 0 -15px;
    line-height: 23px;
    padding: 18px 0 6px 0;
  }

  h2 span {
    border-left: 5px solid #9a9a9a;
    padding-left: 10px;
  }

  h5 {
    margin: 10px 0 0;
    font-size: 14px;
  }

  p {
    line-height: 1.5em;
    margin-top: 0;
  }

  .row-box {
    border-radius: 5px;
    border: 2px solid #dcdcdc;
    background: #fcfcfc;
    width: 100%;
    line-height: 32px;
    box-sizing: border-box;
  }

  .row-flex {
    border-bottom: 1px solid #dcdcdc;
    width: 100%;
  }

  .row-flex:last-child {
    border-bottom: none;
  }

  .second-row-item {
    width: 48%;
    display: inline-block;
    padding-left: 6px;
    vertical-align: middle;
  }

  .left_border {
    border-left: 1px solid #dcdcdc;
  }

  .row-box-col {
    padding-left: 6px;
  }

  .row-box-col+.row-box-col {
    border-top: 1px solid #dcdcdc;
  }

  .none_border {
    border-top: none;
  }

  .col-link {
    color: #000;
    text-decoration: none;
  }

  .col-link:hover {
    text-decoration: underline;
  }

  .margin_bt {
    margin: 0 10px 6px;
    overflow: hidden;
  }

  .margin_bt strong {
    float: left;
  }

  .margin_bt .t_p strong {
    float: none;
  }

  .margin_bt .t_p {
    margin-left: 16px;
    display: block;
  }

  .margin_bt .t_p.simple {
    margin-left: 75px;
  }

  .row-col-tt {
    margin-top: 16px;
    line-height: 20px;
    font-size: 18px;
    font-weight: bold;
  }

  .row-col-tt+h5 {
    margin-top: 5px;
  }

  .circle {
    padding-left: 12px;
    position: relative;
  }

  .circle:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -4px;
    background: #808080;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }

  .circle2 {
    padding-left: 12px;
    position: relative;
  }

  .circle2:before {
    content: "";
    position: absolute;
    left: 2px;
    top: 30%;
    width: 0;
    height: 0;
    border-width: 6px;
    border-color: transparent transparent transparent #808080;
    border-style: solid;
  }

  .bold {
    font-weight: bold;
  }
</style>

</html>